<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <title>表格数据排序</title>  
    <style>  
        table {  
            width: 50%;  
            margin-top: 20px;  
            border: 1px solid #ddd;  
        }  
  
        th {  
            background-color: #dfeefd;  
        }  
  
        th, td {  
            padding: 8px;  
            text-align: left;  
        }  
  
        tr:nth-child(even) {  
            background-color: #f2f2f2;  
        }  
  
        .add-button {  
            margin-top: 20px;  
        }  
  
        .delete-button {  
            cursor: pointer;  
            color: red;  
        }  
    </style>  
</head>  
<body>  
    <table id="myTable">  
        <tr>  
            <th>行号</th>  
            <th>姓名</th>  
            <th>年龄</th>  
            <th>操作</th>  
        </tr>  
    </table>  
    <input type="text" id="nameInput" placeholder="姓名" />  
    <input type="number" id="ageInput" placeholder="年龄" />  
    <button id="addRow" class="add-button">添加数据</button>  
  
    <script>  
        document.getElementById('addRow').addEventListener('click', function() {  
            var name = document.getElementById('nameInput').value;  
            var age = parseInt(document.getElementById('ageInput').value, 10);  
  
            if (name && !isNaN(age)) {  
                var table = document.getElementById('myTable');  
                var rows = table.rows;  
                var newRow = table.insertRow();  
  
                // Insert cells and fill with data  
                var cellIndex = 0;  
                newRow.insertCell(cellIndex++).innerText = rows.length - 1; // Row number  
                newRow.insertCell(cellIndex++).innerText = name;  
                newRow.insertCell(cellIndex++).innerText = age;  
  
                // Create delete button  
                var deleteButtonCell = newRow.insertCell(cellIndex);  
                var deleteButton = document.createElement('button');  
                deleteButton.innerText = '删除';  
                deleteButton.className = 'delete-button';  
                deleteButton.addEventListener('click', function() {  
                    table.deleteRow(newRow.rowIndex - 1); // Row index is adjusted after insertion  
                    updateRowNumbers();  
                });  
                deleteButtonCell.appendChild(deleteButton);  
  
                // Sort table by age  
                sortTableByAge();  
  
                // Clear inputs  
                document.getElementById('nameInput').value = '';  
                document.getElementById('ageInput').value = '';  
            } else {  
                alert('请填写有效的姓名和年龄');  
            }  
        });  
  
        function sortTableByAge() {  
            var table = document.getElementById('myTable');  
            var tbody = table.tBodies[0];  
            var rows = Array.from(tbody.rows).slice(1); // Exclude header row  
  
            rows.sort(function(a, b) {  
                var ageA = parseInt(a.cells[2].innerText, 10);  
                var ageB = parseInt(b.cells[2].innerText, 10);  
                return ageA - ageB;  
            });  
  
            rows.forEach(function(row, index) {  
                tbody.appendChild(row); // Re-append sorted rows  
                row.cells[0].innerText = index + 1; // Update row number  
            });  
        }  
  
        function updateRowNumbers() {  
            var table = document.getElementById('myTable');  
            var rows = table.rows;  
            for (var i = 1; i < rows.length; i++) {  
                rows[i].cells[0].innerText = i;  
            }  
        }  
    </script>  
</body>  
</html>

